let vm = new Vue({
    el: "#app",
    data: {
        // 准备员工信息表数据
        staffList:[
            {
                id:0,
                empno: "7369",
                ename: "SMITH",
                job: "CLERK",
                mgr: 7902,
                hiredate: "1980-12-17",
                sal: 800.00,
                comm: null,
                deptno: "20"
            },
            {
                id:1,
                empno: "7499",
                ename: "ALLEN",
                job: "SALESMAN",
                mgr: 7698,
                hiredate: "1981-02-20",
                sal: 1600.00,
                comm: 300.00,
                deptno: "30"
            },
            {
                id:2,
                empno: "7521",
                ename: "WARD",
                job: "SALESMAN",
                mgr: 7698,
                hiredate: "1981-02-22",
                sal: 1250.00,
                comm: 500.00,
                deptno: "30"
            },
            {
                id:3,
                empno: "7566",
                ename: "JONES",
                job: "MANAGER",
                mgr: 7839,
                hiredate: "1981-04-02",
                sal: 2975.00,
                comm: null,
                deptno: "20"
            },
            {
                id:4,
                empno: "7654",
                ename: "MARTIN",
                job: "SALESMAN",
                mgr: 7698,
                hiredate: "1981-09-28",
                sal: 1250.00,
                comm: 1400.00,
                deptno: "30"
            },
            {
                id:5,
                empno: "7698",
                ename: "BLAKE",
                job: "MANAGER",
                mgr: 7839,
                hiredate: "1981-05-01",
                sal: 2850.00,
                comm: null,
                deptno: "30"
            },
            {
                id:6,
                empno: "7782",
                ename: "CLARK",
                job: "MANAGER",
                mgr: 7839,
                hiredate: "1981-06-09",
                sal: 2450.00,
                comm: null,
                deptno: "10"
            },
            {
                id:7,
                empno: "7788",
                ename: "SCOTT",
                job: "ANALYST",
                mgr: 7566,
                hiredate: "1987-04-19",
                sal: 3000.00,
                comm: null,
                deptno: "20"
            },
            {
                id:8,
                empno:" 7839",
                ename: "KING",
                job: "PRESIDENT",
                mgr: null,
                hiredate: "1981-11-17",
                sal: 5000.00,
                comm: null,
                deptno: "10"
            },
            {
                id:9,
                empno: "7844",
                ename: "TURNER",
                job: "SALESMAN",
                mgr: 7698,
                hiredate: "1981-09-08",
                sal: 1500.00,
                comm: 0.00,
                deptno: "30"
            },
            {
                id:10,
                empno:" 7876",
                ename: "ADAMS",
                job: "CLERK",
                mgr: 7788,
                hiredate: "1987-05-23",
                sal: 1100.00,
                comm: null,
                deptno: "20"
            },
            {
                id:11,
                empno: "7900",
                ename: "JAMES",
                job: "CLERK",
                mgr: 7698,
                hiredate: "1981-12-03",
                sal: 950.00,
                comm: null,
                deptno: "30"
            },
            {
                id:12,
                empno: "7902",
                ename: "FORD",
                job: "ANALYST",
                mgr: 7566,
                hiredate: "1981-12-03",
                sal: 3000.00,
                comm: null,
                deptno: "20"
            },
            {
                id:13,
                empno:" 7934",
                ename: "MILLER",
                job: "CLERK",
                mgr: 7782,
                hiredate: "1982-01-23",
                sal: 1300.00,
                comm: null,
                deptno: "10"
            },
        ],
        // 搜索关键字
        selectData:undefined,
        // 搜索类型
        selectType:"1",

        // 准备分页数据
        total:49,
        pageNum:2,
        pageSize:5,
        pageSizes:[2,3,5,10,20],

        // 表单弹出标志
        flag:false,

        // 新员工数据
        newStaff:{
            id:undefined,
            empno: undefined,
            ename: undefined,
            job: undefined,
            mgr: undefined,
            hiredate: undefined,
            sal: undefined,
            comm: undefined,
            deptno: undefined
        },
        // 校验规则
        ruleReg:{
            empno:[
                {required:true,message: "编号不能为空",trigger: "blur"},
                {min:4,max:4,message: "编号必须为四位",trigger: "blur"}
            ],
            ename:[
                {required:true,message:"姓名不能为空",trigger:"blur"}
            ],
            job:[
                {required:true,message:"职位不能为空",trigger:"blur"}
            ],
            mgr:[

            ],
            sal:[
                {required:true,message:"工资不能为空",trigger:"blur"}
            ],
            comm:[

            ],
            deptno:[
                {required:true,message:"部门编号不能为空",trigger:"blur"},
                {min:2,max:2,message: "部门编号必须为两位",trigger: "blur"}
            ]

        },
        // 数据回显的数据
        editData:{
            id:undefined,
            empno: undefined,
            ename: undefined,
            job: undefined,
            mgr: undefined,
            hiredate: undefined,
            sal: undefined,
            comm: undefined,
            deptno: undefined
        },
        // 编辑表单开关
        editFlag:false,

        // 编辑删除数组的编号
        ids:[],

    },
    methods: {
        mth1:function (param) {
            this.$alert(`当前页面为${param},查询条数为${this.pageSize}`)
        },
        mth2:function (param) {
            this.$alert(`当前页面为${this.pageNum},查询条数为${param}`)
        },
        selectAll:function (param) {
            this.ids = param.map(item=>{
                return item.id;
            })
        },
        selectOne:function (param) {
            this.ids = param.map(item=>{
                return item.id;
            })
        },
        // 编写重置代码
        resetData:function (){
            this.$refs["staffData"].resetFields();
        },

        resetData1:function (){
            this.$refs["staffData1"].resetFields();
        },
        // 编写添加功能
        pushStaff:function () {
            // 判断全部通过才能添加
            this.$refs["staffData"].validate(flag=>{
                if(flag){
                    // 处理日期格式
                    let fullYear = this.newStaff.hiredate.getFullYear()
                    let month = this.newStaff.hiredate.getMonth()
                    let day = this.newStaff.hiredate.getDate()
                    month++;
                    if(month<10){
                        month="0"+month;
                    }
                    if(day<10){
                        day="0"+day;
                    }
                    // 封装数据
                    let element = {
                        id:this.newStaff[this.newStaff.length - 1].id + 1,
                        empno:this. newStaff.empno,
                        ename:this. newStaff.ename,
                        job:this. newStaff.job,
                        mgr:this. newStaff.mgr,
                        hiredate: fullYear+"-"+month+"-"+day,
                        sal:this. newStaff.sal,
                        comm:this. newStaff.comm,
                        deptno:this. newStaff.deptno,
                    };
                    // 将封装的数据存到列表中
                    this.staffList.push(element);

                    // 提示添加成功
                    this.$message({
                        title:"温馨提示",
                        type:"success",
                        message:"添加成功",
                        showClose:true,
                    })

                    // 关闭窗口
                    this.flag = false;
                }else{
                    this.$message({
                        title:"温馨提示",
                        type:"danger",
                        message:"请检查格式",
                        showClose:true,
                    })
                }
            })



        },
        // 编写编辑按钮
        editStaffData:function (rowData) {
            // 打开开关
            this.editFlag = true;
            // 将传过来的数据传给回显数据
            this.editData.id = rowData.id;
            this.editData.empno = rowData.empno;
            this.editData.ename = rowData.ename;
            this.editData.job = rowData.job;
            this.editData.mgr = rowData.mgr;
            this.editData.hiredate = rowData.hiredate;
            this.editData.sal = rowData.sal;
            this.editData.comm = rowData.comm;
            this.editData.deptno = rowData.deptno;
        },
        // 修改代码
        editStaff:function () {
            this.$refs["staffData1"].validate(flag=>{
                if (flag){
                    this.$confirm("您确定要修改吗?")
                        .then(()=>{
                            for (let i = 0; i < this.staffList.length; i++) {
                                let element = this.staffList[i];
                                if(element.id==this.editData.id){
                                    element.empno = this.editData.empno;
                                    element.ename = this.editData.ename;
                                    element.job = this.editData.job;
                                    element.mgr = this.editData.mgr;
                                    element.hiredate = this.editData.hiredate;
                                    element.sal = this.editData.sal;
                                    element.comm = this.editData.comm;
                                    element.deptno = this.editData.deptno;
                                }

                            }
                            this.$message({
                                title:"温馨提示",
                                type:"success",
                                message:"修改成功",
                                showClose:true,
                            })
                            this.editFlag = false;
                        })
                        .catch(()=>{

                        })
                }else{
                    this.$message({
                        title:"温馨提示",
                        type:"info",
                        message:"请检查格式",
                        showClose:true,
                    })
                }
            })
        },

        // 删除代码
        deleteRow:function (rowData) {
            // 询问是否删除
            this.$confirm("您确定要删除么?")
                .then(()=>{
                    // 根据id找到原数组中的数据
                    for (let i = 0; i < this.staffList.length; i++) {
                        let element = this.staffList[i];
                        if(element.id == rowData.id){
                            this.staffList.splice(i,1);
                        }
                    }
                    this.$message({
                        title:"温馨提示",
                        type:"success",
                        message:"删除成功",
                        showClose:true,
                    })

                })
                .catch(()=>{

                })
        },

        // 批量删除代码
        multiplyStaff:function () {
            // 	针对于每个元素进行判断,符合条件的留下,不符合过滤掉了.
            this.staffList = this.staffList.filter(item=>{
                return String(this.ids).indexOf(item.id) === -1;
            })
        },

        // 查询代码
        searchStaff:function () {
            // 重置
            this.staffList = [
                {
                    id:0,
                    empno: "7369",
                    ename: "SMITH",
                    job: "CLERK",
                    mgr: 7902,
                    hiredate: "1980-12-17",
                    sal: 800.00,
                    comm: null,
                    deptno: "20"
                },
                {
                    id:1,
                    empno: "7499",
                    ename: "ALLEN",
                    job: "SALESMAN",
                    mgr: 7698,
                    hiredate: "1981-02-20",
                    sal: 1600.00,
                    comm: 300.00,
                    deptno: "30"
                },
                {
                    id:2,
                    empno: "7521",
                    ename: "WARD",
                    job: "SALESMAN",
                    mgr: 7698,
                    hiredate: "1981-02-22",
                    sal: 1250.00,
                    comm: 500.00,
                    deptno: "30"
                },
                {
                    id:3,
                    empno: "7566",
                    ename: "JONES",
                    job: "MANAGER",
                    mgr: 7839,
                    hiredate: "1981-04-02",
                    sal: 2975.00,
                    comm: null,
                    deptno: "20"
                },
                {
                    id:4,
                    empno: "7654",
                    ename: "MARTIN",
                    job: "SALESMAN",
                    mgr: 7698,
                    hiredate: "1981-09-28",
                    sal: 1250.00,
                    comm: 1400.00,
                    deptno: "30"
                },
                {
                    id:5,
                    empno: "7698",
                    ename: "BLAKE",
                    job: "MANAGER",
                    mgr: 7839,
                    hiredate: "1981-05-01",
                    sal: 2850.00,
                    comm: null,
                    deptno: "30"
                },
                {
                    id:6,
                    empno: "7782",
                    ename: "CLARK",
                    job: "MANAGER",
                    mgr: 7839,
                    hiredate: "1981-06-09",
                    sal: 2450.00,
                    comm: null,
                    deptno: "10"
                },
                {
                    id:7,
                    empno: "7788",
                    ename: "SCOTT",
                    job: "ANALYST",
                    mgr: 7566,
                    hiredate: "1987-04-19",
                    sal: 3000.00,
                    comm: null,
                    deptno: "20"
                },
                {
                    id:8,
                    empno:" 7839",
                    ename: "KING",
                    job: "PRESIDENT",
                    mgr: null,
                    hiredate: "1981-11-17",
                    sal: 5000.00,
                    comm: null,
                    deptno: "10"
                },
                {
                    id:9,
                    empno: "7844",
                    ename: "TURNER",
                    job: "SALESMAN",
                    mgr: 7698,
                    hiredate: "1981-09-08",
                    sal: 1500.00,
                    comm: 0.00,
                    deptno: "30"
                },
                {
                    id:10,
                    empno:" 7876",
                    ename: "ADAMS",
                    job: "CLERK",
                    mgr: 7788,
                    hiredate: "1987-05-23",
                    sal: 1100.00,
                    comm: null,
                    deptno: "20"
                },
                {
                    id:11,
                    empno: "7900",
                    ename: "JAMES",
                    job: "CLERK",
                    mgr: 7698,
                    hiredate: "1981-12-03",
                    sal: 950.00,
                    comm: null,
                    deptno: "30"
                },
                {
                    id:12,
                    empno: "7902",
                    ename: "FORD",
                    job: "ANALYST",
                    mgr: 7566,
                    hiredate: "1981-12-03",
                    sal: 3000.00,
                    comm: null,
                    deptno: "20"
                },
                {
                    id:13,
                    empno:" 7934",
                    ename: "MILLER",
                    job: "CLERK",
                    mgr: 7782,
                    hiredate: "1982-01-23",
                    sal: 1300.00,
                    comm: null,
                    deptno: "10"
                },
            ];
            // switch分支判断属于那种类型
            switch (this.selectType) {
                case "1":
                    // 过滤器筛选
                    this.staffList = this.staffList.filter(item=>{
                        return item.empno.indexOf(this.selectData) != -1
                    })
                    break;
                case "2":
                    this.staffList = this.staffList.filter(item=>{
                        return item.ename.indexOf(this.selectData) != -1
                    })
                    break;
                case "3":
                    this.staffList = this.staffList.filter(item=>{
                        return item.deptno.indexOf(this.selectData) != -1
                    })
                    break;
            }
        }

    },
});